import { useSelector, useDispatch } from 'react-redux';
import { clearDone } from '../store/actions/todos';

export const TodoFooter = () => {
  const dispatch = useDispatch();

  const todos = useSelector((state) => state.todos);
  // 过滤出未完成的todos求数组长度
  const leftCount = todos.filter((item) => !item.done).length;
  // console.log(leftCount);
  // 使用 reduce 方法计算
  // const leftCount2 = todos.reduce((acc, item) => {
  //   if (item.done) {
  //     return acc;
  //   } else {
  //     return acc + 1;
  //   }
  // }, 0);
  // console.log(leftCount2);

  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{leftCount}</strong> item left
      </span>
      <ul className="filters">
        <li>
          <a className="selected" href="#/">
            All
          </a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li>
      </ul>
      <button
        className="clear-completed"
        onClick={() => {
          console.log('清除已完成');
          // 发送 action 修改数据
          dispatch(clearDone());
        }}
      >
        Clear completed
      </button>
    </footer>
  );
};
